<template>
  <div class="home content full-height full-width">
    <div class="marquee" v-if="showMarquee">
      <q-icon name="iconfont icontubiao3-01 icon"></q-icon>
      <div class="content-box">
        <div class="content-info">
          {{ content }}
        </div>
      </div>
      <q-icon name="iconfont icontubiao-67 icon close" @click="closeMarquee"></q-icon>
    </div>
    <div class="flex full-width">
      <div class="flex flex-1 column full-height">
        <div class="entrance-wrapper padding-20">
          <div class="flex justify-between">
            <div class="title">快捷入口</div>
            <div style="color: #5f77fd" class="cursor-pointer" v-if="userInfo.tenant_id !== 0" @click="showEnter=true">设置</div>
          </div>
          <EnterPoint :selectedList="selectedList" @add="showEnter=true"/>
        </div>
        <div class="flex-1 border-radius-6 bg-white padding-20" style="padding-right: 0">
          <div class="title">即将上线</div>
          <ComingSoon />
        </div>
      </div>
      <div class="flex column right-wrapper">
        <div class="user-wrapper border-radius-6">
          <div class="wrapper">
            <User />
          </div>
        </div>
        <div class="announcement-wrapper bg-white border-radius-6 flex-1">
          <div class="flex justify-between">
            <div class="title">最新公告</div>
            <div class="more" @click="$router.push('/main/home/news/news-detail_2')">查看更多</div>
          </div>
          <div>
            <div class="flex items-center announcement" v-for="item in announcement" :key="item.id" @click="goDetail(item.id)">
              <div class="type">{{item.categoryName}}</div>
              <div class="content ellipsis">{{item.title}}</div>
              <div class="date">{{item.date}}</div>
            </div>
          </div>
        </div>
        <div class="api-wrapper bg-white border-radius-6">
          <div class="title">API中心</div>
          <div class="flex justify-between">
            <div class="flex content-box items-center" @click="goApi">
              <div class="icon-wrapper">
                <div class="icon-wrapper flex items-center justify-center">
                  <q-icon class="icon" name="iconfont icontubiao-63"/>
                </div>
              </div>
              <div>API文档</div>
            </div>
            <div class="flex content-box items-center" @click="goInterface">
              <div class="icon-wrapper flex items-center justify-center">
                <q-icon class="icon" name="iconfont icontubiao4-49"/>
              </div>
              <div>接口配置</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Announcement v-if="showPopup" :popupData="popupData"/>
    <EnterDialog :show="showEnter" :selectedListSaved="selectedList" @close="showEnter=false" @setSuccess="setSuccess" />
  </div>
</template>

<script>
import { getNewsList, getNewsPopup, getNotice } from '../../boot/home/home-new'
import User from './components/home-v2/User'
import ComingSoon from './components/home-v2/ComingSoon'
import EnterPoint from './components/home-v2/EnterPoint'
import EnterDialog from './components/home-v2/EnterDialog'
import Announcement from './components/announcement.vue'
import moment from 'moment'
import { mapGetters } from 'vuex'
import { getQuickEntryPrivileges } from '../../boot/home/home'

export default {
  name: 'home',
  components: {
    User,
    ComingSoon,
    EnterPoint,
    EnterDialog,
    Announcement
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  data () {
    return {
      showMarquee: false,
      showPopup: false,
      popupData: [],
      content: '',
      announcement: [],
      showEnter: false,
      selectedList: [] // 已经设置完成的菜单id
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getNoticeInfo()
      this.getAnnouncement()
      this.getQuickEntryPrivilegesInfo()
    },
    closeMarquee () {
      this.showMarquee = false
    },
    // 跳转到接口配置页面
    goInterface () {
      if (this.userInfo.tenant_id === 0) {
        this.$message.warning('您暂未进行企业认证')
      } else {
        this.$router.push({ path: '/main/factory/interface-config' })
      }
    },
    // 获取最新的通知
    getNoticeInfo () {
      getNotice('0').then(res => {
        if (res?.data?.content) {
          this.showMarquee = true
          this.content = res.data.content
        }
      })
      // 更新日志弹框
      getNewsPopup().then(res => {
        // 如果有数据的话 就弹出提示否则就不弹出
        if (res.data && res.data.length > 0) {
          this.showPopup = true
          this.popupData = res.data.slice(0, 5)
        }
      })
    },
    // 获取公告列表
    getAnnouncement () {
      getNewsList().then(res => {
        const result = []
        res.data.forEach(item => {
          if (item?.list?.length) {
            result.push(...item.list)
          }
        })
        const resultTop5 = result.slice(0, 5)
        this.announcement = resultTop5.map(item => {
          return {
            ...item,
            date: moment(item.date).format('YYYY-MM-DD')
          }
        })
      })
    },
    // 跳转到公告详情
    goDetail (id) {
      this.$router.push({
        path: `/main/home/news/news-detail_1`,
        query: {
          id
        }
      })
    },
    // 跳转到文档
    goApi () {
      if (this.userInfo.tenant_id === 0) {
        this.$message.warning('您暂未进行企业认证')
      } else {
        window.open(process.env.DOC_URL, '_blank')
      }
    },
    // 设置快捷入口完成
    setSuccess () {
      this.showEnter = false
      this.getQuickEntryPrivilegesInfo()
    },
    // 获取设置的快捷入口
    getQuickEntryPrivilegesInfo () {
      getQuickEntryPrivileges().then(res => {
        this.selectedList = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.entrance-wrapper {
  background: #FFFFFF;
  border-radius: 6px;
  margin-bottom: 24px;
}

.right-wrapper {
  width: 450px;
  margin-left: 24px;
}

.border-radius-6 {
  border-radius: 6px;
}

.user-wrapper {
  background: #fff;

  .wrapper {
    padding: 20px;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(95, 119, 253, 0.1), rgba(95, 119, 253, 0));

  }
}

.announcement-wrapper {
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 20px 20px 0 20px;

  .more{
    font-size: 14px;
    font-weight: 500;
    color: #5F77FD;
    cursor: pointer;
  }

  .announcement{
    cursor: pointer;
    margin-bottom: 20px;

    .type{
      width: 46px;
      height: 24px;
      background: #F3F6FB;
      border-radius: 4px;
      text-align: center;
      line-height: 24px;
    }

    .content{
      width: 292px;
      padding:0 10px;
    }

    .date{
      font-size: 14px;
      font-weight: 400;
      color: #999999;
    }
  }
}

.api-wrapper {
  height: 170px;
  padding: 20px;

  .content-box{
    width: 195px;
    height: 72px;
    background: rgba(95, 119, 253, 0.05);
    border-radius: 6px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: #5F77FD;
    cursor: pointer;

    .icon-wrapper {
      margin-right: 12px;
      width: 40px;
      height: 40px;
      background: rgba(95, 119, 253, 0.1);
      border-radius: 4px;

      .icon{
        font-size: 22px;
      }
    }
  }
}

.title {
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  position: relative;
  margin-left: 10px;
  margin-bottom: 30px;

  &:before {
    content: "";
    width: 4px;
    height: 14px;
    background: #5F77FD;
    border-radius: 2px;
    position: absolute;
    left: -10px;
    top: 2px;
  }
}

@keyframes wordsLoop {
  0% {
    transform: translateX(100%)
  }
  100% {
    transform: translateX(-50%)
  }
}
.marquee{
  height: 40px;
  background: rgba(95, 119, 253, 0.1);
  border-radius: 6px;
  margin-bottom: 20px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #5F77FD;

  .icon{
    font-size: 14px;
    color: #5F77FD
  }

  .content-box {
    flex: 1;
    margin: 0 20px;
    overflow: hidden;

    .content-info{
      width: 120%;
      white-space: nowrap;
      animation: 25s wordsLoop linear infinite normal;
    }
  }

  .close{
    cursor: pointer;
  }
}
</style>
